<template>
        <div class="page-layout">
                <page-header ref="pageHeader" :style="`margin-top: ${multiPage ? 0 : -24}px;`" :breadcrumb="breadcrumb"
                             :title="pageTitle" :logo="logo" :avatar="avatar">
                        <slot name="action" slot="action"></slot>
                        <slot slot="content" name="headerContent"></slot>
                        <div slot="content" v-if="!this.$slots.headerContent && desc">
                                <p>{{desc}}</p>
                                <div v-if="this.linkList" class="link">
                                        <template v-for="(link, index) in linkList">
                                                <a :key="index" :href="link.href">
                                                        <a-icon :type="link.icon"/>
                                                        {{link.title}}</a>
                                        </template>
                                </div>
                        </div>
                        <slot v-if="this.$slots.extra" slot="extra" name="extra"></slot>
                </page-header>
                <div ref="page" :class="['page-content', layout, pageWidth]">
                        <slot></slot>
                </div>
        </div>
</template>

<script>
        import PageHeader from '@/components/page/header/PageHeader'
        import {mapState, mapMutations} from 'vuex'
        import {getI18nKey} from '@/utils/routerUtil'

        export default {
                name: 'PageLayout',
                components: {PageHeader},
                props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'],
                data() {
                        return {
                                page: {},
                                pageHeaderHeight: 0,
                        }
                },
                watch: {
                        $route() {
                                this.page = this.$route.meta.page
                        }
                },
                updated() {
                        if (!this._inactive) {
                                this.updatePageHeight()
                        }
                },
                activated() {
                        this.updatePageHeight()
                },
                deactivated() {
                        this.updatePageHeight(0)
                },
                mounted() {
                        this.updatePageHeight()
                },
                created() {
                        this.page = this.$route.meta.page
                },
                beforeDestroy() {
                        this.updatePageHeight(0)
                },
                computed: {
                        ...mapState('setting', ['layout', 'multiPage', 'pageMinHeight', 'pageWidth', 'customTitles']),
                        pageTitle() {
                                let pageTitle = this.page && this.page.title
                                return this.customTitle || (pageTitle && this.$t(pageTitle)) || this.title || this.routeName
                        },
                        routeName() {
                                const route = this.$route
                                return this.$t(getI18nKey(route.matched[route.matched.length - 1].path))
                        },
                        breadcrumb() {
                                let page = this.page
                                let breadcrumb = page && page.breadcrumb
                                if (breadcrumb) {
                                        let i18nBreadcrumb = []
                                        breadcrumb.forEach(item => {
                                                i18nBreadcrumb.push(this.$t(item))
                                        })
                                        return i18nBreadcrumb
                                } else {
                                        return this.getRouteBreadcrumb()
                                }
                        },
                        marginCorrect() {
                                return this.multiPage ? 24 : 0
                        }
                },
                methods: {
                        ...mapMutations('setting', ['correctPageMinHeight']),
                        getRouteBreadcrumb() {
                                let routes = this.$route.matched
                                const path = this.$route.path
                                let breadcrumb = []
                                routes.filter(item => path.includes(item.path))
                                        .forEach(route => {
                                                const path = route.path.length === 0 ? '/home' : route.path
                                                breadcrumb.push(this.$t(getI18nKey(path)))
                                        })
                                let pageTitle = this.page && this.page.title
                                if (this.customTitle || pageTitle) {
                                        breadcrumb[breadcrumb.length - 1] = this.customTitle || pageTitle
                                }
                                return breadcrumb
                        },
                        /**
                         * 用于计算页面内容最小高度
                         * @param newHeight
                         */
                        updatePageHeight(newHeight = this.$refs.pageHeader.$el.offsetHeight + this.marginCorrect) {
                                this.correctPageMinHeight(this.pageHeaderHeight - newHeight)
                                this.pageHeaderHeight = newHeight
                        }
                }
        }
</script>

<style lang="less">
        .page-header {
                margin: 0 -24px 0;
        }

        .link {
                /*margin-top: 16px;*/
                line-height: 24px;

                a {
                        font-size: 14px;
                        margin-right: 32px;

                        i {
                                font-size: 22px;
                                margin-right: 8px;
                        }
                }
        }

        .page-content {
                position: relative;
                /*padding: 24px 0 0;*/
                padding: 0;

                &.side {
                }

                &.head.fixed {
                        margin: 0 auto;
                        max-width: 1400px;
                }
        }
</style>
